<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix header-box">
        <span>评价管理</span>
        <el-input placeholder="请输入内容" v-model="inputName" style="width: 300px;" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="search(true)"></el-button>
        </el-input>
      </div>
      <div style="min-width: 1200px;">
        <el-table :data="tableData.slice((currentPage4 - 1) * pageSize, currentPage4 * pageSize)" style="width: 100%">
          <el-table-column prop="id" label="id" type="index"/>
          <el-table-column prop="nickname" label="昵称" />
          <el-table-column prop="content" label="内容" />
          <el-table-column prop="create_time" label="评论时间" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="min" icon="el-icon-delete" @click="removeFn(scope.row.id)"></el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="currentPage4" :page-sizes="[3, 5, 7, 10]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { getMessageAPI,delMessageAPI } from '@/api/message'
export default {
  data() {
    return {
      tableData: [],
      inputName: '',
      currentPage4: 1,
      pageSize: 10,
      total: 20
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = 1
      this.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage4 = val
    },
    search(bool) {
      if (bool) {
        let newListData = []
        if (this.inputName) {
          this.tableData.filter((item) => {
            if (item.nickname.indexOf(this.inputName) !== -1) {
              newListData.push(item)
            }
          });
        }
        this.tableData = newListData;
      } else {
        this.initGetMessageFn()
      }
    },
    async initGetMessageFn(){
      const res = await getMessageAPI()
      console.log(res);
      if(res.status !== 200){
        this.$message.error('获取数据失败!')
      }else{
        this.$message.success('获取数据成功!')
        this.tableData = res.data.data
        this.total = res.data.total
      }
    },
    async removeFn(id){
      const res = await delMessageAPI(id)
      if(res.status !==200){
        this.$message.error('删除评论失败!')
      }else{
        this.$message.success('删除评论成功!')
        this.initGetMessageFn()
      }
    }
  },
  watch: {
    inputName(newValue) {
      if (newValue) {
        this.search(true)
      } else {
        this.search(false)
      }
    }
  },
  created(){
    this.initGetMessageFn()
  }
}
</script>

<style scoped>
.header-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination {
  display: flex;
  justify-content: center;
  margin: 10px;
}
</style>
